<template>
  <div>
    <p>非动态路由版</p>
    <p>商品详情-{{$route.query.name}}</p>
    <p>价格：{{$route.query.price}}</p>
    <!-- 通过commit调用mutation -->
    <button @click="$store.commit('addCartNum')">加入购物车</button>
    <button @click="addCartNum">加购</button>
    <p>购物车数量：{{$store.state.cartNum}}</p>
    <input type="text" v-model="money">
    <button @click="charge">充值</button>
    <p>当前账户余额：{{myMoney}}</p>
  </div>
</template>

<script>
import {mapState, mapMutations,mapActions} from 'vuex'
export default {
  data() {
    return {
      money: 0
    }
  },
  computed: {
    ... mapState({
      myMoney: 'money'
    })
  },
  methods: {
    // 将addCartNum、getPoint、getLevel映射进组价后，他们就是组件内的方法，使用方式：@click="getLevel"
    ...mapMutations([
      'addCartNum'
    ]),
    ...mapActions([
      'getPoint',
      'getLevel'
    ]),
    charge() {
      // 通过commit调用mutation
      // 方式1
      // this.$store.commit('chargeMoney', this.money);
      // 方式2，对象风格的提交方式
      this.$store.commit({
        type: 'chargeMoney',
        num: this.money
      })
    }
  },
  // 组件内的守卫，相当于一个生命周期
  // 进入组件之前
  beforeRouteEnter(to, from, next) {
    // ...
    // console.log(this);
    next()
  },
  // 路由刷新之前
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate');
    next()
  },
  // 离开组件之前
  beforeRouteLeave(to, from, next) {
    // ...
    console.log('离开组件');
    next()
  }
}
</script>

<style>

</style>